import React,{Component} from 'react'
import {
    Modal,
    WhiteSpace,
    WingBlank,
    NavBar,
    Icon,
    Tabs,
    Toast,
    Flex,
    Button,
    Checkbox,
    ListView,
    SegmentedControl,
    Popup
} from 'antd-mobile';
import Moment from 'moment';
import {connect} from "dva";
import {routerRedux} from "dva/router";
import MyListView from '../../components/MyListView/MyListView';
import TimeBuyBottomBar from '../../components/NavBottomBar/TimeBuyBottomBar';
import NavBottomBar from '../../components/NavBottomBar/NavBottomBar';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyScroll from '../../components/MyScroll/MyScroll';
import {seckill} from "./secKill.less";

class SecKillRemind extends Component {

    constructor(props) {
        super(props);
        this.curTime = '';
        this.showTime=true;
    }

    componentDidMount(){
        this.Refresh();
    }
    componentDidUpdate(){
        this.curTime="";
    }
    Refresh = () => {
        console.log(this.gcId)
        return this.props.dispatch({ type: 'secKill/secKillMyRemindEFF',obj:{pageNo:1} });
    };
    LoadMore = () => {
        return this.props.dispatch({ type: 'secKill/secKillMyRemindEFF', obj:{pageNo:this.props.secKill.pageNo+1} });
    }
    nToS = n => n > 9 ? n : `0${n}`

    judgTime = (time, isDay = false) => {
        var newTime = new Date();
        var curTime = new Date(time);
        // console.log(curTime, curTime.getDate(), "curTime");
        //
        // console.log(newTime >= curTime, "判断是否在抢购中。。。。");
        // if (newTime >= curTime) return "抢购中";

        var day = newTime.getDate() == curTime.getDate() ? "" : ` ${curTime.getDate()}日 `

        return `${day || (isDay ? "今天" : "")}${this.nToS(curTime.getHours())}:${this.nToS(curTime.getMinutes())} 开抢`
    }

    startTime = (time)=>{
        let seconds = parseInt(time / 1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        // 天数
        let d = parseInt(h / 24);
        // 显示的小时数
        let showHour = Math.floor(h - d * 24);
        let m = Math.floor((seconds - h * 60 * 60) / 60);
        let s = Math.floor((seconds - h * 60 * 60 - m * 60));
        if (seconds < 0) {
            h = '0';
            m = '00';
            s = '00';
            d = '00';
            showHour = '00';
        }
        return `${showHour}:${m}`
    }
    render() {
        const {secKillMyRemindList=[]}=this.props.secKill;
        return  <div style={{height:"100%"}}>
            <Flex  direction="column"
                   style={{height:"100%"}}
                   className={seckill}
            >
                <NavBar
                    style={{ width:"100%",backgroundColor:"#fff",color:"#333" }}
                    mode="dark"
                    icon={<Icon key="1" type="left" style={{width:".7rem",height:".7rem"}}/>}
                    onLeftClick={() => {
                        this.props.dispatch(routerRedux.goBack());
                    }}
                >秒杀提醒</NavBar>
                {secKillMyRemindList?<MyListView
                    style={{height:"100%"}}
                    getAlloyTouch={ this.getAlloyTouch }
                    refresh={ this.Refresh }
                    loadMore={ this.LoadMore }
                    hasMore={ this.props.secKill.pageNo * this.props.secKill.pageSize < this.props.secKill.totalRows  }
                    // vWrapperClass={ goods_list }
                    // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                    renderItem={(v,i,a)=>{
                        if(i>0&&a[i].startTime==a[i-1].startTime){
                            this.showTime = false;
                        }else{this.showTime = true;}
                        if(v.status==20){
                            let timeBuyStatus="";
                            let mashangButton=false;
                            let qiangguangButton=false;
                            if(v.activityInventory>0){
                                timeBuyStatus = '秒杀';
                                mashangButton=true;
                            }else{
                                timeBuyStatus = '已抢光';
                                qiangguangButton=true;
                            }
                            return <div key={i}>
                                {this.showTime? <Flex justify="center" style={{color:"#ff0036",backgroundColor:"#F7F7F7",padding:".3rem 0",fontSize:".35rem",fontWeight:"bolder"}}>
                                    秒杀中
                                </Flex>:""}

                                <div style={{width:"100%",backgroundColor:"#fff"}}>
                                    <WingBlank  style={{paddingBottom:".3rem",paddingTop:".3rem"}}>
                                        <Flex>
                                            <div style={{width:"2rem",height:"2rem",marginRight:".2rem",padding:".2rem"}} onClick={()=>{
                                                this.props.dispatch(routerRedux.push({
                                                    pathname: `/goodsDetail/${v.specId}`,
                                                }));
                                            }}>
                                                <NoLazyImg src={v.goodsPicture} style={{width:"2rem",height:"2rem",marginRight:".2rem",padding:".2rem"}} />
                                            </div>

                                            <div style={{width:"100%"}}>
                                                <div style={{fontSize:".3rem",lineHeight:".45rem",marginBottom:".2rem"}} className="timeBuyTitle" onClick={()=>{
                                                    this.props.dispatch(routerRedux.push({
                                                        pathname: `/goodsDetail/${v.specId}`,
                                                    }));
                                                }}>{v.goodsName}</div>
                                                {v.activityList[0]? <Flex style={{marginBottom:".1rem"}}>
                                                    {v.activityList.map((a,b)=>{
                                                        return <div key={b} style={{color:"#F8BE59",border:"1px solid #F8BE59",padding:".1rem",marginRight:".2rem"}}>
                                                            {a.name}
                                                        </div>
                                                    })}
                                                </Flex>:""}
                                                <Flex style={{marginBottom:".4rem"}} onClick={()=>{
                                                    this.props.dispatch(routerRedux.push({
                                                        pathname: `/goodsDetail/${v.specId}`,
                                                    }));
                                                }}>
                                                        {v.isSelf==1?<div style={{border:"1px solid #F17878",color:"#F17878",padding:".05rem",borderRadius:".1rem",marginRight:".2rem"}}>自营</div>:""}
                                                        {v.activityInventory==0?<Flex style={{color:"#F4B712"}}>
                                                            { Moment(this.props.nowTime-v.startTime).format(' h小时mm分') }抢光{v.activityInventory +v.selledNum>10000?(v.activityInventory +v.selledNum)/10000+"件":(v.activityInventory +v.selledNum)+"件"}
                                                        </Flex>: ""}
                                                </Flex>
                                                <Flex justify="end">
                                                    {mashangButton&&<Button type='ghost' size='small' inline style={{backgroundColor:"#ff0036",color:"#fff",borderRadius:".5rem"}} onClick={()=>{
                                                        this.props.dispatch(routerRedux.push({
                                                            pathname: `/goodsDetail/${v.specId}`,
                                                        }));
                                                    }}>{timeBuyStatus}</Button>}
                                                    {qiangguangButton&&<Button  size='small' inline style={{backgroundColor:"#e5e5e5",color:"#fff",borderRadius:".5rem"}}>{timeBuyStatus}</Button>}
                                                </Flex>
                                                <Flex >
                                                    {v.activityInventory==0?<div style={{color:"#e5e5e5",display:"flex", alignItems:"flex-end"}} onClick={()=>{
                                                        this.props.dispatch(routerRedux.push({
                                                            pathname: `/goodsDetail/${v.specId}`,
                                                        }));
                                                    }}><span style={{background:"#F4B712",color:"#fff",display:"inline-block",padding:".05rem",marginRight:".2rem"}}>秒杀价</span>
                                                        <div><span>¥</span><span style={{fontSize:".4rem"}}>{v.activityPrice }</span></div>
                                                        <span style={{color:"#999",textDecoration:"line-through",marginLeft:".2rem"}}>¥{v.goodsPrice }</span>
                                                    </div>: <div style={{color:"#ff0036",display:"flex", alignItems:"flex-end"}} onClick={()=>{
                                                        this.props.dispatch(routerRedux.push({
                                                            pathname: `/goodsDetail/${v.specId}`,
                                                        }));
                                                    }}><span style={{background:"#F4B712",color:"#fff",display:"inline-block",padding:".05rem",marginRight:".2rem"}}>秒杀价</span>
                                                        <div><span>¥</span><span style={{fontSize:".4rem"}}>{v.activityPrice }</span></div>
                                                        <span style={{color:"#999",textDecoration:"line-through",marginLeft:".2rem"}}>¥{v.goodsPrice }</span>
                                                    </div>}

                                                </Flex>
                                            </div>
                                        </Flex>
                                    </WingBlank>
                                </div>
                            </div>
                        }else if(v.status==10){
                            let timeBuyStatus="";
                            let tixingButton=false;
                            let quxiaoButton=false;
                            switch (v.isRemind) {
                                case 0:
                                    timeBuyStatus = '提醒我';
                                    tixingButton=true;
                                    break;
                                case 1:
                                    timeBuyStatus = '取消提醒';
                                    quxiaoButton=true;
                                    break;
                                default:
                                    break;
                            }
                            let activityId=v.id;
                            return <div key={i} style={{width:"100%",backgroundColor:"#fff",marginBottom:".5rem"}}>
                                <div >
                                    {this.showTime?<Flex style={{backgroundColor:"#F7F7F7",padding:".3rem 0",fontSize:".25rem"}}>
                                        <WingBlank style={{width:"100%"}}>
                                            <Flex justify="center" >
                                                <Flex style={{color:"#ff0036",fontSize:".3rem",fontWeight:"bolder"}}>
                                                    <div className="acb"></div>
                                                    {/* {this.startTime(c.startTime)}
                                                        开抢 */}
                                                    {this.judgTime(v.startTime)}
                                                </Flex>
                                            </Flex>
                                        </WingBlank>
                                    </Flex>:""}

                                    <WingBlank  style={{paddingBottom:".3rem",paddingTop:".3rem",borderBottom:"1px solid #e5e5e5"}}>
                                        <Flex>
                                            <NoLazyImg src={v.goodsPicture } style={{width:"2rem",height:"2rem",marginRight:".2rem",padding:".2rem"}} onClick={()=>{
                                                this.props.dispatch(routerRedux.push({
                                                    pathname: `/goodsDetail/${v.specId}`,
                                                }));
                                            }}/>
                                            <div style={{width:"100%"}}>
                                                <div style={{fontSize:".3rem",lineHeight:".45rem",marginBottom:".3rem"}} className="timeBuyTitle" onClick={()=>{
                                                    this.props.dispatch(routerRedux.push({
                                                        pathname: `/goodsDetail/${v.specId}`,
                                                    }));
                                                }}>{v.goodsName}</div>
                                                {v.activityList[0]? <Flex style={{marginBottom:".1rem"}}>
                                                    {v.activityList.map((a,b)=>{
                                                        return <div key={b} style={{color:"#F8BE59",border:"1px solid #F8BE59",padding:".1rem",marginRight:".2rem"}}>
                                                            {a.name}
                                                        </div>
                                                    })}
                                                </Flex>:""}
                                                <Flex style={{marginBottom:".1rem"}} onClick={()=>{
                                                    this.props.dispatch(routerRedux.push({
                                                        pathname: `/goodsDetail/${v.specId}`,
                                                    }));
                                                }} >
                                                        {v.isSelf==1?<div style={{border:"1px solid #F17878",color:"#F17878",padding:".05rem",borderRadius:".1rem",marginRight:".2rem"}}>自营</div>:""}
                                                        <div style={{color:"#00E079"}}>
                                                            {v.peopleNum || 0}人已设置提醒 | { this.judgTime(v.startTime, true) }
                                                        </div>
                                                </Flex>
                                                <Flex justify="end">
                                                    {tixingButton&&<Button  size='small' inline style={{backgroundColor:"#00E079",color:"#fff",borderRadius:".5rem"}} onClick={()=>{
                                                        this.props.dispatch({type:"secKill/secKillRemindEFF",obj:{activityId}}).then(result=>{
                                                            if (result.code == 200) {
                                                                Toast.success(result.msg, 1.5,()=>{
                                                                    this.Refresh();
                                                                });
                                                            } else {
                                                                Toast.fail(result.msg, 1.5);
                                                            }
                                                        })
                                                    }}>{timeBuyStatus}</Button>}
                                                    {quxiaoButton&&<Button  size='small' inline style={{backgroundColor:"#fff",color:"#00E079",borderRadius:".5rem",border:".03rem solid #00E079"}} onClick={()=>{
                                                        this.props.dispatch({type:"secKill/secKillDelRemindEFF",obj:{activityId}}).then(result=>{
                                                            if (result.code == 200) {
                                                                Toast.success(result.msg, 1.5,()=>{
                                                                    this.Refresh();
                                                                });
                                                            } else {
                                                                Toast.fail(result.msg, 1.5);
                                                            }
                                                        })
                                                    }}>{timeBuyStatus}</Button>}
                                                </Flex>
                                                <Flex >
                                                    <div style={{color:"#00E079",display:"flex", alignItems:"flex-end"}} onClick={()=>{
                                                        this.props.dispatch(routerRedux.push({
                                                            pathname: `/goodsDetail/${v.specId}`,
                                                        }));
                                                    }}><span style={{background:"#F4B712",color:"#fff",display:"inline-block",padding:".05rem",marginRight:".2rem"}}>秒杀价</span>
                                                        <div><span>¥</span><span style={{fontSize:".4rem"}}>{v.activityPrice }</span></div>
                                                        <span style={{color:"#999",textDecoration:"line-through",marginLeft:".2rem"}}>¥{v.goodsPrice }</span>
                                                    </div>


                                                </Flex>
                                            </div>
                                        </Flex>
                                    </WingBlank>
                                </div>
                            </div>
                        }

                    }}
                    data={ secKillMyRemindList }>
                </MyListView>:<div className="mei"><span style={{position:"absolute",bottom:"0",left:"30%",fontSize:".3rem"}}>没有可抢的商品呦!</span></div> }


            </Flex>
            {/*<TimeBuyBottomBar path={ location.pathname }></TimeBuyBottomBar>*/}
        </div>

    }
}

export default connect(({ secKill}) => ({ secKill }))(SecKillRemind);
